<template>
  <div class="direction">
    <div class="direction__flex_top">
      <div>
        X坐标 :<span> {{ info.originalX || 0 }}</span>
      </div>
      <div>
        Y坐标 : <span>{{ info.originalY || 0 }}</span>
      </div>
    </div>
    <div class="direction__item">
      <div>
        <el-button
          type="primary"
          icon="el-icon-arrow-up"
          plain
          circle
          :disabled="disabled"
          @click="changeDirection(1)"
        />
      </div>
      <div>
        <el-button
          type="primary"
          icon="el-icon-arrow-left"
          plain
          circle
          :disabled="disabled"
          @click="changeDirection(4)"
        />
        <el-input-number
          v-model="distance"
          placeholder="移动距离"
          :controls="false"
          style="width: 100px"
        />
        <el-button
          type="primary"
          icon="el-icon-arrow-right"
          plain
          circle
          :disabled="disabled"
          @click="changeDirection(2)"
        />
      </div>
      <div>
        <el-button
          type="primary"
          icon="el-icon-arrow-down"
          plain
          circle
          :disabled="disabled"
          @click="changeDirection(3)"
        />
      </div>
    </div>
    <div class="direction__flex">
      <el-button type="success" size="mini" :disabled="disabled" @click="resetCoordinate">
        复位
      </el-button>
      <el-button type="danger" size="mini" :disabled="disabled" @click="stopCoordinate">
        停止
      </el-button>
    </div>
    <el-form :model="editForm" size="small" label-position="top">
      <el-form-item label="Z轴伸出状态" prop="zaxisStatus">
        <div class="disabled-value">
          {{ info.zaxisStatus == 1 ? "已伸出" : "已缩回" }}
        </div>
      </el-form-item>
      <el-form-item label="下药点X轴坐标" prop="shipmentXAxis">
        <el-input
          v-model="editForm.shipmentXAxis"
          type="number"
          @change="changeForm('shipmentXAxis')"
        >
          <el-button slot="append" @click="saveShipment"> 保存 </el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="下药点Y轴坐标" prop="shipmentYAxis">
        <el-input
          v-model="editForm.shipmentYAxis"
          type="number"
          @change="changeForm('shipmentYAxis')"
        >
          <el-button slot="append" @click="saveShipment"> 保存 </el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="Z轴坐标" prop="zaxis">
        <el-input v-model="editForm.zaxis" size="mini">
          <el-button slot="append" :disabled="disabled" @click="zaxisUp">
            {{ info.zaxisStatus == 1 ? "缩回Z轴" : "伸出Z轴" }}
          </el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="行号或货道号取货" prop="testName">
        <el-input v-model="testName" placeholder="行号或货道号取货" size="mini">
          <el-button slot="append" :disabled="disabled" @click="onlinePickTest">
            测试
          </el-button>
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  onlineMove,
  onlineReset,
  onlineStop,
  onlineTest,
  onlinePickUp,
} from "@/api/mc/cabinet";
export default {
  name: "Direction",
  props: {
    cabinetId: {
      type: String,
      default: "",
    },
    info: {
      type: Object,
      default: () => {
        return {
          originalX: 0,
          originalY: 0,
          serialPortList: [],
        };
      },
    },
    // 正反面
    // 1 正面 3 反面
    face: {
      type: Number,
      default: 1,
    },
    wsId: {
      type: [String, Number],
      default: 0,
    },
    form: {
      type: Object,
      default: () => {},
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      distance: 0, // 移动距离
      editForm: {},
      testName: "", // 测试名称
    };
  },
  watch: {
    form: {
      handler(val) {
        this.editForm = { ...val };
        this.editForm.shipmentXAxis = this.info.shipmentXAxis;
        this.editForm.shipmentYAxis = this.info.shipmentYAxis;
      },
      immediate: true,
    },
    info: {
      handler(val) {
        if (!this.editForm.shipmentXAxis) {
          this.editForm.shipmentXAxis = val.shipmentXAxis;
        }
        if (!this.editForm.shipmentYAxis) {
          this.editForm.shipmentYAxis = val.shipmentYAxis;
        }
        this.$forceUpdate();
      },
      immediate: true,
    },
  },
  methods: {
    // 改变方向
    changeDirection(direction) {
      this.checkSerialPort(() => {
        if (!this.distance) {
          this.$message.error("请输入移动距离");
          return;
        }
        this.$emit("changeDisable", true);
        onlineMove({
          cabinetId: this.cabinetId,
          direction,
          distance: this.distance,
          wsId: this.wsId,
        });
      });
    },
    // 复位机械臂坐标
    resetCoordinate() {
      this.checkSerialPort(() => {
        this.$emit("changeDisable", true);
        onlineReset({
          cabinetId: this.cabinetId,
        });
      });
    },
    // 停止机械臂移动
    stopCoordinate() {
      this.checkSerialPort(() => {
        this.$emit("changeDisable", true);
        onlineStop({
          cabinetId: this.cabinetId,
        });
      });
    },
    // 改变表单
    changeForm(field) {
      this.$emit("changeForm", { field, value: this.editForm[field] });
    },
    // 保存下药点坐标
    saveShipment() {
      this.checkSerialPort(() => {
        this.$emit("saveShipment");
      });
    },
    // 伸出Z轴
    zaxisUp() {
      this.checkSerialPort(() => {
        this.$emit("changeDisable", true);
        onlineTest({
          cabinetId: this.cabinetId,
          zaxis: this.editForm.zaxis,
          face: this.face,
        });
      });
    },
    // 测试取药
    onlinePickTest() {
      this.checkSerialPort(() => {
        if (!this.testName) {
          this.$modal.msgError("请输入测试行号或货道号");
          return;
        }
        this.$emit("changeDisable", true);
        onlinePickUp({
          cabinetId: this.cabinetId,
          name: this.testName,
          face: this.face,
        });
      });
    },
    // 校验串口
    checkSerialPort(callback) {
      if (this.info.serialPortList.length == 0) {
        this.$message.error("请先连接串口");
        return;
      }
      callback();
    },
  },
};
</script>
<style lang="scss" scoped>
.direction {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #72b5f8;
  box-shadow: inset 0 0 10px rgba(64, 160, 255, 0.2);
  border-radius: 10px;
  .direction__flex_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    font-size: 14px;
    span {
      color: #409eff;
    }
  }
  .direction__item {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    > div {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      margin: 14px 0;
    }
  }
  .direction__flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
}

.disabled-value {
  width: 100%;
  height: 32px;
  display: inline-block;
  padding: 0 15px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background-color: #f9f9f9;
  border-color: #dfe4ed;
  color: #ff4949;
}
</style>
